var head=document.querySelector('.head')
var list=document.querySelector('.list')
var t
let xhr=new XMLHttpRequest()
xhr.open('get',`http://chst.vip:1234/api/getbaicaijiatitle`,false)
xhr.onload=function(){
  if(xhr.status===200){
      let res=JSON.parse(xhr.responseText)
//   console.log(res.result)
  var lis=''
//   let regExp = /^<[^<]+\s+src="([^''""]*)"/;

  res.result.forEach((ele,ind) => {
//   var tu = res.result[ind].couponProductImg.match(regExp)[1];


//   console.log(tu)

      lis+=
      `
      
      <li titleid="${ele.titleId}">${ele.title}</li>
     `
            })
            
                    head.innerHTML=lis
           
            }
            }  
            xhr.send()



    $('.head li').click(function(){
      clearInterval(t)

    var index=$(this).index()
        $(this).css('border-bottom', "3px solid #c36c").siblings().css('border-bottom','none')
    

        let xhr1=new XMLHttpRequest()
        xhr1.open('get',`http://chst.vip:1234/api/getbaicaijiaproduct?titleid=${index}`,false)
        xhr1.onload=function(){
          if(xhr1.status===200){
              let res=JSON.parse(xhr1.responseText)
          // console.log(res.result)
          var lis=''
          let regExp = /^<[^<]+\s+src="([^''""]*)"/;
        
          res.result.forEach((item,ind) => {
          var tu = res.result[ind].productImg.match(regExp)[1];
        
        
        //   console.log(tu)
        
              lis+=
              `  <li>
              <img src="${tu}">
              <h5>${item.productName}</h5>
              <p>${item.productPrice}</p>
           
              <button class="b1">
                <div></div>
              </button>
              <span>${item.productCouponRemain}</span>
              <button class="b2">${item.productCoupon}</button>
             <button class="b3">${item.productHref}</button>
  
          </li>
              
             `
                    })
                    
                            list.innerHTML=lis
                            var b1div=document.querySelector('.b1 div')
                            var b1=document.querySelector('.b1')
                            $('.b1 div').html(0+'%')
                            $('.b1').css('width','0')
                             var n=0
                           
                             t=setInterval(function(){
                              n++
                              $('.b1').css('width',n+'px')

                              $('.b1 div').html(n+'%')
                              if(n>=100){
                                clearInterval(t)
                         $('.b1 div').css('color','white')
 
                              }
                                 
                             },30)
                        
                      
                  
        
        
                    }
                    }  
                    xhr1.send()

    })

  



    var index=$(this).index()
      

        let xhr1=new XMLHttpRequest()
        xhr1.open('get',`http://chst.vip:1234/api/getbaicaijiaproduct?titleid=0`,false)
        xhr1.onload=function(){
          if(xhr1.status===200){
              let res=JSON.parse(xhr1.responseText)
          console.log(res.result)
          var lis=''
          let regExp = /^<[^<]+\s+src="([^''""]*)"/;
        
          res.result.forEach((item,ind) => {
          var tu = res.result[ind].productImg.match(regExp)[1];
        
        
        //   console.log(tu)
        
              lis+=
              `  <li>
              <img src="${tu}">
              <h5>${item.productName}</h5>
              <p>${item.productPrice}</p>
      
              <button class="b1">
                <div></div>
              </button>
              <span>${item.productCouponRemain}</span>
              <button class="b2">${item.productCoupon}</button>
             <button class="b3">${item.productHref}</button>
  
          </li>
              
             `
                    })
                    
                            list.innerHTML=lis
                   var b1div=document.querySelectorAll('.b1 div')
                  var b1=document.querySelectorAll('.b1')
             $('.b1 div').html(0+'%')
             $('.b1').css('width','0')
                 

                   var n=0
                
                   t=setInterval(function(){
                    n++
                
             $('.b1').css('width',n+'px')

               $('.b1 div').html(n+'%')

                    if(n>=100){
                      clearInterval(t)
               
             $('.b1 div').css('color','white')


                    }
                       
                   },30)
              
            
        
        
                    }
                    }  
                    xhr1.send()

   
                    $('.sn').click(function(){
                        document.documentElement.scrollTop=0
                    })
                    $('.icon-zuojiantou1').click(function(){
                        location.href="./商品首页.html"
                    })